<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue | VanKa</title><script src="https://cdn.bootcss.com/valine/1.4.4/Valine.min.js"></script><link rel="stylesheet" href="/vcb/css/arknights.css"><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.2/styles/atom-one-dark-reasonable.min.css"><style>@font-face {
 font-family: BenderLight;
 src: local('Bender'), url("/vcb/font/BenderLight.ttf");
}
@font-face {
 font-family: 'JetBrains Mono';
 src: local('JetBrains Mono'), url('/vcb/font/JetBrainsMono-Regular.woff2') format('woff2');
}</style><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/vcb/atom.xml" title="VanKa" type="application/atom+xml">
</head><body><header><nav><a href="/vcb/">Home</a><a href="/vcb/archives/">Archives</a></nav></header><main><article><div id="post-bg"><div id="post-title"><h1>Vue</h1><hr></div><div id="post-content"><h1 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h1><blockquote>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
<p>如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。</p>
<p>如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。</p>
</blockquote>
<h3 id="相关工具介绍"><a href="#相关工具介绍" class="headerlink" title="相关工具介绍"></a>相关工具介绍</h3><h4 id="Visual-Studio-Code"><a href="#Visual-Studio-Code" class="headerlink" title="Visual Studio Code"></a>Visual Studio Code</h4><p>官网下载地址：<a target="_blank" rel="noopener" href="https://code.visualstudio.com/Download">https://code.visualstudio.com/Download</a><br><a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_44362299/article/details/111996546"></a></p>
<h5 id="汉化"><a href="#汉化" class="headerlink" title="汉化"></a>汉化</h5><ol>
<li>将鼠标置于软件界面任意处，然后Fn+F1下找到“Configure Display Language”点击。</li>
<li>选择“Install additional languages…”</li>
<li>选择中文简体，点击install，然后右下角会出现一个提示框，点击“restart now”重启软件，再打开就是中文了。</li>
</ol>
<h4 id="nodejs"><a href="#nodejs" class="headerlink" title="nodejs"></a>nodejs</h4><blockquote>
<p><a target="_blank" rel="noopener" href="http://nodejs.cn/">Node.js</a> 是一个基于 Chrome V8 引擎的 JavaScript 运行时</p>
</blockquote>
<p>官网下载地址 ：<a target="_blank" rel="noopener" href="https://nodejs.org/en/">https://nodejs.org/en/</a></p>
<h4 id="npm"><a href="#npm" class="headerlink" title="npm"></a>npm</h4><blockquote>
<p>NPM是随同NodeJS一起安装的包管理工具</p>
</blockquote>
<ul>
<li>允许用户从NPM服务器下载别人编写的第三方包到本地使用。</li>
<li>允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。</li>
<li>允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。</li>
</ul>
<h5 id="基础命令"><a href="#基础命令" class="headerlink" title="基础命令"></a>基础命令</h5><ul>
<li>更新 npm 版本</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g npm to update</span><br></pre></td></tr></table></figure>

<ul>
<li>查看安装软件</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm ls --depth 0 -g</span><br></pre></td></tr></table></figure>

<ul>
<li>查看版本 </li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm -v</span><br></pre></td></tr></table></figure>

<ul>
<li>卸载</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall npm -g</span><br></pre></td></tr></table></figure>









<h5 id="cnpm"><a href="#cnpm" class="headerlink" title="cnpm"></a>cnpm</h5><ol>
<li><p>安装cnpm</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure></li>
<li><p>升级cnpm</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install cnpm -g</span><br></pre></td></tr></table></figure></li>
<li><p>查看cnpm版本</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install cnpm -g</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="vue-cli"><a href="#vue-cli" class="headerlink" title="vue cli"></a>vue cli</h4><h5 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h5><ul>
<li><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/373112837">知乎 - Vue-cli 4.5 Vue 脚手架学习/入门/超详细</a></li>
<li><a target="_blank" rel="noopener" href="https://cn.vitejs.dev/">vitejs脚手架</a></li>
</ul>
<h5 id="命令"><a href="#命令" class="headerlink" title="命令"></a>命令</h5><ul>
<li><p>安装</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -g @vue/cli</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -g @vue/cli@版本号 # 安装指定版本</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g @vue/cli # 官网推荐 </span><br></pre></td></tr></table></figure></li>
<li><p>升级</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm update -g @vue/cli</span><br></pre></td></tr></table></figure></li>
<li><p>卸载</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall -g @vue/cli</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm uninstall vue-cli -g</span><br></pre></td></tr></table></figure></li>
</ul>
<h5 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h5><ol>
<li><p>构建xxx项目</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue create XXX</span><br></pre></td></tr></table></figure></li>
<li><p>选择模板</p>
<p>选择<code>Manually select features</code></p>
</li>
<li><p>选择插件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">Vue CLI v4.5.13</span><br><span class="line">? Please pick a preset: Manually select features</span><br><span class="line">? Check the features needed for your project:</span><br><span class="line"> (*) Choose Vue version</span><br><span class="line"> (*) Babel</span><br><span class="line"> ( ) TypeScript</span><br><span class="line"> ( ) Progressive Web App (PWA) Support</span><br><span class="line"> (*) Router</span><br><span class="line"> (*) Vuex</span><br><span class="line">&gt;(*) CSS Pre-processors</span><br><span class="line"> ( ) Linter / Formatter</span><br><span class="line"> ( ) Unit Testing</span><br><span class="line"> ( ) E2E Testing</span><br></pre></td></tr></table></figure></li>
<li><p>版本</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Vue CLI v4.5.13</span><br><span class="line">? Please pick a preset: Manually select features</span><br><span class="line">? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors</span><br><span class="line">? Choose a version of Vue.js that you want to start the project with 3.x</span><br><span class="line">? Use history mode for router? (Requires proper server setup for index fallback in production) Yes</span><br><span class="line">? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less</span><br><span class="line">? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files</span><br><span class="line">? Save this as a preset for future projects? (y/N)</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li><p>运行</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run serve</span><br></pre></td></tr></table></figure></li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure>



<h4 id="vue-1"><a href="#vue-1" class="headerlink" title="vue"></a>vue</h4><blockquote>
<p><a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/">vue3</a></p>
</blockquote>
<h5 id="安装vue"><a href="#安装vue" class="headerlink" title="安装vue"></a>安装vue</h5><ol>
<li><p>安装</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue # 旧版 vue 2.0</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue@next # 最新稳定版 vue 3.0 </span><br></pre></td></tr></table></figure></li>
</ol>
<ol start="2">
<li><p>下载</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure></li>
<li><p>创建项目 </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue create xxxx </span><br></pre></td></tr></table></figure></li>
<li><p>启动项目 </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run serve</span><br></pre></td></tr></table></figure></li>
</ol>
<p>踩坑N次，不推荐安装这个</p>
<h5 id="开发版-vue-2-0"><a href="#开发版-vue-2-0" class="headerlink" title="开发版 vue 2.0"></a>开发版 vue 2.0</h5><p>安装目录: node_modules/vue</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/vuejs/vue.git</span><br></pre></td></tr></table></figure>

<h5 id="命令-1"><a href="#命令-1" class="headerlink" title="命令"></a>命令</h5><ul>
<li><p>查看版本</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue -V</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue --version</span><br></pre></td></tr></table></figure></li>
</ul>
<h5 id="报错"><a href="#报错" class="headerlink" title="报错"></a>报错</h5><p>npm install报错Failed at the <a href="mailto:&#112;&#104;&#97;&#x6e;&#x74;&#x6f;&#109;&#x6a;&#x73;&#x2d;&#x70;&#114;&#101;&#x62;&#117;&#105;&#x6c;&#116;&#64;&#50;&#46;&#49;&#46;&#x31;&#x36;">&#112;&#104;&#97;&#x6e;&#x74;&#x6f;&#109;&#x6a;&#x73;&#x2d;&#x70;&#114;&#101;&#x62;&#117;&#105;&#x6c;&#116;&#64;&#50;&#46;&#49;&#46;&#x31;&#x36;</a> install script</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install phantomjs-prebuilt@2.1.14 --ignore-scripts</span><br></pre></td></tr></table></figure>
<h4 id="vite"><a href="#vite" class="headerlink" title="vite"></a>vite</h4><blockquote>
<p>一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。</p>
<p>一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。<br><a target="_blank" rel="noopener" href="https://cn.vitejs.dev/">vitejs</a></p>
</blockquote>
<h4 id="命令-2"><a href="#命令-2" class="headerlink" title="命令"></a>命令</h4><ol>
<li>安装<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init vite@latest </span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g create-vite-app</span><br></pre></td></tr></table></figure></li>
</ol>
<ol>
<li>构建项目<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm init vite-app XXX # xxx 为项目名</span><br><span class="line">npm install            # 安装依赖</span><br><span class="line">npm run dev           # 启动项目</span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="vue-3-0"><a href="#vue-3-0" class="headerlink" title="vue 3.0"></a>vue 3.0</h4><p><a target="_blank" rel="noopener" href="https://vue3js.cn/docs/zh/guide/migration/introduction.html">vue 3.0</a></p>
<p>参考：<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/76558d003ea7">https://www.jianshu.com/p/76558d003ea7</a></p>
<p>命令式<br>声明式</p>
<p>安装路由</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-router@next</span><br></pre></td></tr></table></figure>
<p>axios前后端交互</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install axios --save</span><br></pre></td></tr></table></figure>
<p>mockejs数据模拟</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install mockjs</span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://element-plus.gitee.io/#/zh-CN">Element Plus</a></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install element-plus --save</span><br></pre></td></tr></table></figure>

<p>Element Plus icons</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @element-plus/icons</span><br></pre></td></tr></table></figure>


<p>live2d widget 纸片人</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -S live2d-widget</span><br></pre></td></tr></table></figure>







<h2 id="流程"><a href="#流程" class="headerlink" title="流程"></a>流程</h2><h3 id="安装流程"><a href="#安装流程" class="headerlink" title="安装流程"></a>安装流程</h3><h4 id="安装node-js"><a href="#安装node-js" class="headerlink" title="安装node.js"></a>安装node.js</h4><h4 id="安装python2-7-0"><a href="#安装python2-7-0" class="headerlink" title="安装python2.7.0"></a>安装python2.7.0</h4><h4 id="配置npm"><a href="#配置npm" class="headerlink" title="配置npm"></a>配置npm</h4><ol>
<li><p>更改全局依赖包安装位置</p>
<p>配置npm安装的全局模块所在的路径，以及缓存cache的路径（避免占C盘空间）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm config set cache &quot;D:\config\node\node_cache&quot;;</span><br><span class="line">npm config set prefix &quot;D:\config\node\node_global&quot;;</span><br><span class="line">D:\config\node\node_modules</span><br></pre></td></tr></table></figure></li>
<li><p>配置淘宝镜像</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry=http://r.npm.taobao.org/</span><br><span class="line"># https://registry.npm.taobao.org  NPM镜像站升级中，使用 http://r.npm.taobao.org/</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="vue3-vite2"><a href="#vue3-vite2" class="headerlink" title="vue3 + vite2"></a>vue3 + vite2</h3><ol>
<li><p>构建项目</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init vite-app vue3demo2</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Done. Now run:			# 完成了。现在运行:</span><br><span class="line"></span><br><span class="line">  cd vue3demo2</span><br><span class="line">  npm install (or `yarn`)</span><br><span class="line">  npm run dev (or `yarn dev`)</span><br></pre></td></tr></table></figure>

<p>安装插件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure></li>
<li><p>运行测试</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dev</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">npm ERR! code 1</span><br><span class="line">npm ERR! path F:\YXf\vue\vue3demo2\node_modules\bufferutil</span><br><span class="line">npm ERR! command failed</span><br><span class="line">npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild</span><br><span class="line">npm ERR! gyp info it worked if it ends with ok</span><br><span class="line">npm ERR! gyp info using node-gyp@7.1.2</span><br><span class="line">npm ERR! gyp info using node@14.17.4 | win32 | x64</span><br><span class="line">npm ERR! gyp ERR! find Python</span><br><span class="line">npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration</span><br><span class="line">npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON</span><br><span class="line">npm ERR! gyp ERR! find Python checking if &quot;python3&quot; can be used</span><br><span class="line">npm ERR! gyp ERR! find Python - &quot;python3&quot; is not in PATH or produced an error</span><br><span class="line">npm ERR! gyp ERR! find Python checking if &quot;python&quot; can be used</span><br><span class="line">npm ERR! gyp ERR! find Python - &quot;python&quot; is not in PATH or produced an error</span><br><span class="line">npm ERR! gyp ERR! find Python checking if &quot;python2&quot; can be used</span><br><span class="line">npm ERR! gyp ERR! find Python - &quot;python2&quot; is not in PATH or produced an error</span><br><span class="line">npm ERR! gyp ERR! find Python checking if Python is C:\Python37\python.exe</span><br><span class="line">npm ERR! gyp ERR! find Python - &quot;C:\Python37\python.exe&quot; could not be run</span><br><span class="line">npm ERR! gyp ERR! find Python checking if Python is C:\Python27\python.exe</span><br><span class="line">npm ERR! gyp ERR! find Python - &quot;C:\Python27\python.exe&quot; could not be run</span><br><span class="line">npm ERR! gyp ERR! find Python checking if the py launcher can be used to find Python</span><br><span class="line">npm ERR! gyp ERR! find Python - &quot;py.exe&quot; is not in PATH or produced an error</span><br><span class="line">npm ERR! gyp ERR! find Python</span><br><span class="line">npm ERR! gyp ERR! find Python **********************************************************</span><br><span class="line">npm ERR! gyp ERR! find Python You need to install the latest version of Python.</span><br><span class="line">npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,</span><br><span class="line">npm ERR! gyp ERR! find Python you can try one of the following options:</span><br><span class="line">npm ERR! gyp ERR! find Python - Use the switch --python=&quot;C:\Path\To\python.exe&quot;</span><br><span class="line">npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)</span><br><span class="line">npm ERR! gyp ERR! find Python - Set the environment variable PYTHON</span><br><span class="line">npm ERR! gyp ERR! find Python - Set the npm configuration variable python:</span><br><span class="line">npm ERR! gyp ERR! find Python   npm config set python &quot;C:\Path\To\python.exe&quot;</span><br><span class="line">npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation</span><br><span class="line">npm ERR! gyp ERR! find Python **********************************************************</span><br><span class="line">npm ERR! gyp ERR! find Python</span><br><span class="line">npm ERR! gyp ERR! configure error</span><br><span class="line">npm ERR! gyp ERR! stack Error: Could not find any Python installation to use</span><br><span class="line">npm ERR! gyp ERR! stack     at PythonFinder.fail (D:\config\nodejs\node_global\node_modules\npm\node_modules\node-gyp\li</span><br><span class="line">b\find-python.js:302:47)</span><br><span class="line">npm ERR! gyp ERR! stack     at PythonFinder.runChecks (D:\config\nodejs\node_global\node_modules\npm\node_modules\node-g</span><br><span class="line">yp\lib\find-python.js:136:21)</span><br><span class="line">npm ERR! gyp ERR! stack     at PythonFinder.&lt;anonymous&gt; (D:\config\nodejs\node_global\node_modules\npm\node_modules\node</span><br><span class="line">-gyp\lib\find-python.js:200:18)</span><br><span class="line">npm ERR! gyp ERR! stack     at PythonFinder.execFileCallback (D:\config\nodejs\node_global\node_modules\npm\node_modules</span><br><span class="line">\node-gyp\lib\find-python.js:266:16)</span><br><span class="line">npm ERR! gyp ERR! stack     at exithandler (child_process.js:397:5)</span><br><span class="line">npm ERR! gyp ERR! stack     at ChildProcess.errorhandler (child_process.js:409:5)</span><br><span class="line">npm ERR! gyp ERR! stack     at ChildProcess.emit (events.js:400:28)</span><br><span class="line">npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)</span><br><span class="line">npm ERR! gyp ERR! stack     at onErrorNT (internal/child_process.js:467:16)</span><br><span class="line">npm ERR! gyp ERR! stack     at processTicksAndRejections (internal/process/task_queues.js:82:21)</span><br><span class="line">npm ERR! gyp ERR! System Windows_NT 10.0.19041</span><br><span class="line">es\\node-gyp\\bin\\node-gyp.js&quot; &quot;rebuild&quot;</span><br><span class="line">npm ERR! gyp ERR! cwd F:\YXf\vue\vue3demo2\node_modules\bufferutil</span><br><span class="line">npm ERR! gyp ERR! node -v v14.17.4</span><br><span class="line">npm ERR! gyp ERR! node-gyp -v v7.1.2</span><br><span class="line">npm ERR! gyp ERR! not ok</span><br><span class="line"></span><br><span class="line">npm ERR! A complete log of this run can be found in:</span><br><span class="line">npm ERR!     D:\config\nodejs\node_global\_logs\2021-09-08T12_38_37_458Z-debug.log</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="报错-1"><a href="#报错-1" class="headerlink" title="报错"></a>报错</h3><h5 id="安装报错"><a href="#安装报错" class="headerlink" title="安装报错"></a>安装报错</h5><blockquote>
<p>npm ERR! code 1<br>npm ERR! path D:\config\node\node_global\node_modules@vue\cli\node_modules\bufferutil<br>npm ERR! command failed<br>npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild<br>npm ERR! gyp info it worked if it ends with ok<br>npm ERR! gyp info using <a href="mailto:&#110;&#111;&#x64;&#101;&#x2d;&#x67;&#x79;&#112;&#x40;&#x37;&#x2e;&#49;&#46;&#x32;">&#110;&#111;&#x64;&#101;&#x2d;&#x67;&#x79;&#112;&#x40;&#x37;&#x2e;&#49;&#46;&#x32;</a><br>npm ERR! gyp info using <a href="mailto:&#110;&#111;&#x64;&#101;&#x40;&#x31;&#x34;&#x2e;&#x31;&#x37;&#x2e;&#54;">&#110;&#111;&#x64;&#101;&#x40;&#x31;&#x34;&#x2e;&#x31;&#x37;&#x2e;&#54;</a> | win32 | x64<br>npm ERR! gyp info find Python using Python version 2.7.0 found at “D:\config\python\python.exe”<br>npm ERR! gyp http GET <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/node-v14.17.6-headers.tar.gz">https://nodejs.org/download/release/v14.17.6/node-v14.17.6-headers.tar.gz</a><br>npm ERR! gyp http 200 <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/node-v14.17.6-headers.tar.gz">https://nodejs.org/download/release/v14.17.6/node-v14.17.6-headers.tar.gz</a><br>npm ERR! gyp http GET <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/SHASUMS256.txt">https://nodejs.org/download/release/v14.17.6/SHASUMS256.txt</a><br>npm ERR! gyp http GET <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/win-x86/node.lib">https://nodejs.org/download/release/v14.17.6/win-x86/node.lib</a><br>npm ERR! gyp http GET <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/win-x64/node.lib">https://nodejs.org/download/release/v14.17.6/win-x64/node.lib</a><br>npm ERR! gyp http GET <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/win-arm64/node.lib">https://nodejs.org/download/release/v14.17.6/win-arm64/node.lib</a><br>npm ERR! gyp http 404 <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/win-arm64/node.lib">https://nodejs.org/download/release/v14.17.6/win-arm64/node.lib</a><br>npm ERR! gyp http 200 <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/SHASUMS256.txt">https://nodejs.org/download/release/v14.17.6/SHASUMS256.txt</a><br>npm ERR! gyp http 200 <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/win-x86/node.lib">https://nodejs.org/download/release/v14.17.6/win-x86/node.lib</a><br>npm ERR! gyp http 200 <a target="_blank" rel="noopener" href="https://nodejs.org/download/release/v14.17.6/win-x64/node.lib">https://nodejs.org/download/release/v14.17.6/win-x64/node.lib</a><br>npm ERR! gyp ERR! find VS<br>npm ERR! gyp ERR! find VS msvs_version was set from command line or npm config<br>npm ERR! gyp ERR! find VS - looking for Visual Studio version 2015<br>npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt<br>npm ERR! gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use<br>npm ERR! gyp ERR! find VS looking for Visual Studio 2015<br>npm ERR! gyp ERR! find VS - not found<br>npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8<br>npm ERR! gyp ERR! find VS<br>npm ERR! gyp ERR! find VS valid versions for msvs_version:<br>npm ERR! gyp ERR! find VS<br>npm ERR! gyp ERR! find VS **************************************************************<br>npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio<br>npm ERR! gyp ERR! find VS including the “Desktop development with C++” workload.<br>npm ERR! gyp ERR! find VS For more information consult the documentation at:<br>npm ERR! gyp ERR! find VS <a target="_blank" rel="noopener" href="https://github.com/nodejs/node-gyp#on-windows">https://github.com/nodejs/node-gyp#on-windows</a><br>npm ERR! gyp ERR! find VS **************************************************************<br>npm ERR! gyp ERR! find VS<br>npm ERR! gyp ERR! configure error<br>npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use<br>npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (D:\config\node\node_global\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:121:47)<br>npm ERR! gyp ERR! stack     at D:\config\node\node_global\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:74:16<br>npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\config\node\node_global\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:351:14)<br>npm ERR! gyp ERR! stack     at D:\config\node\node_global\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:70:14<br>npm ERR! gyp ERR! stack     at D:\config\node\node_global\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:372:16<br>npm ERR! gyp ERR! stack     at D:\config\node\node_global\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7<br>npm ERR! gyp ERR! stack     at D:\config\node\node_global\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16<br>npm ERR! gyp ERR! stack     at ChildProcess.exithandler (child_process.js:397:5)<br>npm ERR! gyp ERR! stack     at ChildProcess.emit (events.js:400:28)<br>npm ERR! gyp ERR! stack     at maybeClose (internal/child_process.js:1055:16)<br>npm ERR! gyp ERR! System Windows_NT 10.0.19041<br>npm ERR! gyp ERR! command “D:\config\node\node.exe” “D:\config\node\node_global\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js” “rebuild”<br>npm ERR! gyp ERR! cwd D:\config\node\node_global\node_modules@vue\cli\node_modules\bufferutil<br>npm ERR! gyp ERR! node -v v14.17.6<br>npm ERR! gyp ERR! node-gyp -v v7.1.2<br>npm ERR! gyp ERR! not ok</p>
<p>npm ERR! A complete log of this run can be found in:<br>npm ERR!     D:\config\node\node_cache_logs\2021-09-09T10_25_26_522Z-debug.log</p>
</blockquote>
<h5 id="运行报错"><a href="#运行报错" class="headerlink" title="运行报错"></a>运行报错</h5><blockquote>
<p>error command C:\Windows\system32\cmd.exe /d /s /c node-gyp rebuild</p>
</blockquote>
<p>参考： <a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_30600503/article/details/101811489">https://blog.csdn.net/weixin_30600503/article/details/101811489</a></p>
<ol>
<li><p>以系统管理员身份，打开cmd</p>
</li>
<li><p>安装node-gyp</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g node-gyp</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --global --production windows-build-tools</span><br></pre></td></tr></table></figure></li>
<li><p>配置依赖</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config set python python2.7</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm config set msvs_version 2015</span><br></pre></td></tr></table></figure></li>
<li><p>配置环境</p>
<p>高级系统设置 中 选择 Path 添加python安装路径即可</p>
</li>
<li><p>校验</p>
<p>cmd输入<code>python</code>，可查看到版本号，说明安装成功</p>
<p>未校验成功！</p>
</li>
</ol>
<h6 id="linux-dev运行报错"><a href="#linux-dev运行报错" class="headerlink" title="linux dev运行报错"></a>linux dev运行报错</h6><blockquote>
<p>WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.<br>Entrypoints:<br>  main (1.28 MiB)<br>      bundle.js</p>
</blockquote>
<h5 id="运行失败"><a href="#运行失败" class="headerlink" title="运行失败"></a>运行失败</h5><blockquote>
<p>‘vite’ 不是内部或外部命令，也不是可运行的程序或批处理文件</p>
</blockquote>
<p>参考： <a target="_blank" rel="noopener" href="https://blog.csdn.net/qwe122343/article/details/115044562">https://blog.csdn.net/qwe122343/article/details/115044562</a></p>
<ol>
<li>删除 node_modules 文件夹 和 package-lock.json 文件</li>
<li>重新执行 <code>npm i</code> 安装依赖</li>
<li>运行 <code>npm run dev</code></li>
</ol>
<h5 id="安装依赖失败"><a href="#安装依赖失败" class="headerlink" title="安装依赖失败"></a>安装依赖失败</h5><blockquote>
<p>npm ERR! gyp ERR! find Python **********************************************************<br>npm ERR! gyp ERR! find Python You need to install the latest version of Python.<br>npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,<br>npm ERR! gyp ERR! find Python you can try one of the following options:<br>npm ERR! gyp ERR! find Python - Use the switch –python=”C:\Path\To\python.exe”<br>npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)<br>npm ERR! gyp ERR! find Python - Set the environment variable PYTHON<br>npm ERR! gyp ERR! find Python - Set the npm configuration variable python:<br>npm ERR! gyp ERR! find Python   npm config set python “C:\Path\To\python.exe”<br>npm ERR! gyp ERR! find Python For more information consult the documentation at:<br>npm ERR! gyp ERR! find Python <a target="_blank" rel="noopener" href="https://github.com/nodejs/node-gyp#installation">https://github.com/nodejs/node-gyp#installation</a><br>npm ERR! gyp ERR! find Python **********************************************************<br>npm ERR! gyp ERR! find Python<br>npm ERR! gyp ERR! configure error<br>npm ERR! gyp ERR! stack Error: Could not find any Python installation to use<br>npm ERR! gyp ERR! stack     at PythonFinder.fail (D:\config\nodejs\node_global\node_modules\npm\node_modules\node-gyp\li<br>b\find-python.js:302:47)<br>npm ERR! gyp ERR! stack     at PythonFinder.runChecks (D:\config\nodejs\node_global\node_modules\npm\node_modules\node-g<br>yp\lib\find-python.js:136:21)<br>npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (D:\config\nodejs\node_global\node_modules\npm\node_modules\node<br>npm ERR! gyp ERR! stack     at PythonFinder.execFileCallback (D:\config\nodejs\node_global\node_modules\npm\node_modules<br>\node-gyp\lib\find-python.js:266:16)<br>npm ERR! gyp ERR! stack     at exithandler (child_process.js:397:5)<br>npm ERR! gyp ERR! stack     at ChildProcess.errorhandler (child_process.js:409:5)<br>npm ERR! gyp ERR! stack     at ChildProcess.emit (events.js:400:28)<br>npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)<br>npm ERR! gyp ERR! stack     at onErrorNT (internal/child_process.js:467:16)<br>npm ERR! gyp ERR! stack     at processTicksAndRejections (internal/process/task_queues.js:82:21)<br>npm ERR! gyp ERR! System Windows_NT 10.0.19041<br>npm ERR! gyp ERR! command “D:\config\nodejs\node.exe” “D:\config\nodejs\node_global\node_modules\npm\node_modul<br>es\node-gyp\bin\node-gyp.js” “rebuild”<br>npm ERR! gyp ERR! cwd F:\YXf\vue\vue3demo2\node_modules\bufferutil<br>npm ERR! gyp ERR! node -v v14.17.4<br>npm ERR! gyp ERR! node-gyp -v v7.1.2<br>npm ERR! gyp ERR! not ok</p>
<p>npm ERR! A complete log of this run can be found in:<br>npm ERR!     D:\config\nodejs\node_global_logs\2021-09-08T12_58_45_027Z-debug.log</p>
</blockquote>
<p>参考： </p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install -g mirror-config-china --registry=http://registry.npm.taobao.org</span><br><span class="line">npm install node-sass</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>





<h5 id="解决-node-gyp-错误问题"><a href="#解决-node-gyp-错误问题" class="headerlink" title="解决 node-gyp 错误问题"></a>解决 node-gyp 错误问题</h5><ol>
<li><p>npm 安装windows-build-tools</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --global --production windows-build-tools</span><br></pre></td></tr></table></figure></li>
<li><p>安装node-gyp</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g node-gyp</span><br></pre></td></tr></table></figure></li>
<li><p>配置依赖</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm config set python python2.7</span><br><span class="line">npm config set msvs_version 2015</span><br></pre></td></tr></table></figure></li>
<li><p>测试</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">```</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>npm config list<br>cli configs<br>metrics-registry = “<a target="_blank" rel="noopener" href="https://registry.npmjs.org/&quot;">https://registry.npmjs.org/&quot;</a><br>scope = “”<br>user-agent = “npm/6.14.13 node/v14.17.3 win32 x64”</p>
</li>
</ol>
<p>; builtin config undefined<br>prefix = “C:\Users\23950\AppData\Roaming\npm”</p>
<p>; node bin location = D:\config\node\node.exe<br>; cwd = C:\Users\23950<br>; HOME = C:\Users\23950<br>; “npm config ls -l” to show all defaults.</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure>
<p> “builtin” config from D:\config\node\node_global\node_modules\npm\npmrc</p>
<p>; prefix = “C:\Users\Administrator\AppData\Roaming\npm” ; overridden by user</p>
<p>; “user” config from C:\Users\Administrator.npmrc</p>
<p>cache = “D:\config\node\node_cache”<br>msvs_version = “2015”<br>prefix = “D:\config\node\node_global”<br>python = “python2.7”<br>registry = “<a target="_blank" rel="noopener" href="https://registry.npm.taobao.org/&quot;">https://registry.npm.taobao.org/&quot;</a></p>
<p>; node bin location = D:\config\node\node.exe<br>; cwd = C:\Windows\system32<br>; HOME = C:\Users\Administrator<br>; Run <code>npm config ls -l</code> to show all defaults.</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">### vite创建项目</span><br><span class="line"></span><br><span class="line">1. 构建项目</span><br></pre></td></tr></table></figure>
<p>npm init vite-app vue3demo01</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">2. 下载依赖</span><br></pre></td></tr></table></figure>
<p>npm install</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">3. 运行</span><br></pre></td></tr></table></figure>
<p>npm run dev</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">4.更改全局依赖包安装位置</span><br><span class="line"></span><br><span class="line">这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express  -g （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。</span><br></pre></td></tr></table></figure>
<p>npm config set cache “D:\config\nodejs\node_cache”;<br>npm config set prefix “D:\config\nodejs\node_global”</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">D:\config\nodejs\node_modules\npm\bin\npm-cli.js</span><br><span class="line">[](https://www.jianshu.com/p/97f4dd529513)</span><br><span class="line"></span><br><span class="line">[](https://blog.csdn.net/zhouzuoluo/article/details/89212494)</span><br><span class="line"></span><br><span class="line">#### 错误</span><br><span class="line">##### npm 版本过低</span><br></pre></td></tr></table></figure>
<p>New minor version of npm available! 7.20.3 -&gt; 7.22.0<br>Changelog: <a target="_blank" rel="noopener" href="https://github.com/npm/cli/releases/tag/v7.22.0">https://github.com/npm/cli/releases/tag/v7.22.0</a><br>Run npm install -g <a href="mailto:&#x6e;&#112;&#109;&#x40;&#x37;&#x2e;&#50;&#x32;&#x2e;&#x30;">&#x6e;&#112;&#109;&#x40;&#x37;&#x2e;&#50;&#x32;&#x2e;&#x30;</a> to update!</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">更新</span><br></pre></td></tr></table></figure>
<p>npm install -g <a href="mailto:&#110;&#x70;&#109;&#64;&#55;&#x2e;&#50;&#50;&#x2e;&#48;">&#110;&#x70;&#109;&#64;&#55;&#x2e;&#50;&#50;&#x2e;&#48;</a><br>```</p>
<div id="paginator"></div></div><div id="post-footer"><hr><a href="/vcb/2021/10/30/Nacos/">← Prev Nacos</a><span style="color: #fe2"> | </span><a href="/vcb/2021/09/22/Git/">Git Next →</a><hr></div><div id="bottom-btn"><a id="to-index" href="#post-index" title="index">≡</a><a id="to-top" href="#post-title" title="to top">∧</a></div><div id="Valine"></div><script>new Valine({
 el: '#Valine'
 , appId: ''
 , appKey: ''
 , placeholder: '此条评论委托企鹅物流发送'
})</script></div></article><aside><div id="about"><a href="/vcb/" id="logo"><img src="https://ak.hypergryph.com/assets/index/images/ak/pc/faction/1.png" alt="Logo"></a><h1 id="Dr"><a href="/"> Dr.VanKa</a></h1><section id="total"><a id="total-archives" href="/vcb/archives"><span class="total-title">Archives Total:</span><span class="total-number">12</span></a><div id="total-tags"><span class="total-title">Tags:</span><span class="total-number">13</span></div><div id="total-categories"><span class="total-title">Categories:</span><span class="total-number">1</span></div></section></div><div id="aside-block"><h1>INDEX</h1><div id="post-index"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#vue"><span class="toc-number">1.</span> <span class="toc-text">vue</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E5%B7%A5%E5%85%B7%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.0.1.</span> <span class="toc-text">相关工具介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Visual-Studio-Code"><span class="toc-number">1.0.1.1.</span> <span class="toc-text">Visual Studio Code</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%B1%89%E5%8C%96"><span class="toc-number">1.0.1.1.1.</span> <span class="toc-text">汉化</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#nodejs"><span class="toc-number">1.0.1.2.</span> <span class="toc-text">nodejs</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#npm"><span class="toc-number">1.0.1.3.</span> <span class="toc-text">npm</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E5%91%BD%E4%BB%A4"><span class="toc-number">1.0.1.3.1.</span> <span class="toc-text">基础命令</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#cnpm"><span class="toc-number">1.0.1.3.2.</span> <span class="toc-text">cnpm</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#vue-cli"><span class="toc-number">1.0.1.4.</span> <span class="toc-text">vue cli</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%8F%82%E8%80%83"><span class="toc-number">1.0.1.4.1.</span> <span class="toc-text">参考</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%91%BD%E4%BB%A4"><span class="toc-number">1.0.1.4.2.</span> <span class="toc-text">命令</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="toc-number">1.0.1.4.3.</span> <span class="toc-text">创建项目</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#vue-1"><span class="toc-number">1.0.1.5.</span> <span class="toc-text">vue</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AE%89%E8%A3%85vue"><span class="toc-number">1.0.1.5.1.</span> <span class="toc-text">安装vue</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E7%89%88-vue-2-0"><span class="toc-number">1.0.1.5.2.</span> <span class="toc-text">开发版 vue 2.0</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%91%BD%E4%BB%A4-1"><span class="toc-number">1.0.1.5.3.</span> <span class="toc-text">命令</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%8A%A5%E9%94%99"><span class="toc-number">1.0.1.5.4.</span> <span class="toc-text">报错</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#vite"><span class="toc-number">1.0.1.6.</span> <span class="toc-text">vite</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%91%BD%E4%BB%A4-2"><span class="toc-number">1.0.1.7.</span> <span class="toc-text">命令</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#vue-3-0"><span class="toc-number">1.0.1.8.</span> <span class="toc-text">vue 3.0</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%81%E7%A8%8B"><span class="toc-number">1.1.</span> <span class="toc-text">流程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%B5%81%E7%A8%8B"><span class="toc-number">1.1.1.</span> <span class="toc-text">安装流程</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85node-js"><span class="toc-number">1.1.1.1.</span> <span class="toc-text">安装node.js</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%89%E8%A3%85python2-7-0"><span class="toc-number">1.1.1.2.</span> <span class="toc-text">安装python2.7.0</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%85%8D%E7%BD%AEnpm"><span class="toc-number">1.1.1.3.</span> <span class="toc-text">配置npm</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#vue3-vite2"><span class="toc-number">1.1.2.</span> <span class="toc-text">vue3 + vite2</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8A%A5%E9%94%99-1"><span class="toc-number">1.1.3.</span> <span class="toc-text">报错</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%8A%A5%E9%94%99"><span class="toc-number">1.1.3.0.1.</span> <span class="toc-text">安装报错</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%BF%90%E8%A1%8C%E6%8A%A5%E9%94%99"><span class="toc-number">1.1.3.0.2.</span> <span class="toc-text">运行报错</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#linux-dev%E8%BF%90%E8%A1%8C%E6%8A%A5%E9%94%99"><span class="toc-number">1.1.3.0.2.1.</span> <span class="toc-text">linux dev运行报错</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%BF%90%E8%A1%8C%E5%A4%B1%E8%B4%A5"><span class="toc-number">1.1.3.0.3.</span> <span class="toc-text">运行失败</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96%E5%A4%B1%E8%B4%A5"><span class="toc-number">1.1.3.0.4.</span> <span class="toc-text">安装依赖失败</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3-node-gyp-%E9%94%99%E8%AF%AF%E9%97%AE%E9%A2%98"><span class="toc-number">1.1.3.0.5.</span> <span class="toc-text">解决 node-gyp 错误问题</span></a></li></ol></li></ol></li></ol></li></ol></li></ol></div></div><footer><nobr><span class="text-title">©</span><span class="text-content">1970 to 2020</span></nobr><wbr><nobr><span class="text-title">ICP</span><span class="text-content">——备案号——</span></nobr><wbr><wbr><nobr>published with&nbsp;<a target="_blank" rel="noopener" href="http://hexo.io">Hexo&nbsp;</a></nobr><wbr><nobr>Theme&nbsp;<a target="_blank" rel="noopener" href="https://github.com/Yue-plus/hexo-theme-arknights">Arknight&nbsp;</a></nobr><wbr><nobr>by&nbsp;<a target="_blank" rel="noopener" href="https://github.com/Yue-plus">Yue_plus</a></nobr></footer></aside></main><canvas id="canvas-dust"></canvas><script src="/vcb/js/arknights.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script></body></html>